<template>
    <div class="zone-goods">
        <div class="zone-tabs">
            <van-tabs
                v-model="active"
                style="width: 80%;"
                class="new-list"
                :line-width="line_width"
                :swipe-threshold="5"
            >
                <van-tab :title="zname"></van-tab>
            </van-tabs>
            <div class="rec-icon" @click="allRecTab">
                <svg class="icon down" aria-hidden="true">
                    <use xlink:href="#icon-arrow_down" />
                </svg>
            </div>
            <top-pop
                :show="popShow"
                :zone-list="tagAll"
                @changeShow="allRecTab"
                @changeTab="getMoreGoods"
            ></top-pop>
        </div>
        <div class="tab-goods">
            <list-goods :goods-list="zoneGoodsList" @toDetail="toDetail" @add="toAddCart" />
            <infinite-loading
                :identifier="infiniteId"
                @infinite="infiniteHandler"
                spinner="circles"
            >
                <!--v-if="zoneGoodsList.length>0" 重复加载时打开-->
            </infinite-loading>
        </div>
        <bottom-tab></bottom-tab>
        <product-spec
            :pro-content="specGood"
            operation="add"
            ref="fspec"
            @chooseDone="specChooseOk"
            v-if="specGood.key"
        />
    </div>
</template>

<script>
    import API from "../../request/api";
    import ListGoods from "../../components/Online/list-goods";
    import { mapActions } from "vuex";
    import TopPop from "../../components/Online/top-pop";
    import BottomTab from "../../components/Online/bottom-tab";
    import ProductSpec from "../../components/Online/product-spec";
    export default {
        name: "zone-goods",
        data() {
            return {
                line_width: 30,
                pageIndex: 0,
                pageSize: 8,
                active: 0,
                zoneGoodsList: [],
                infiniteId: +new Date(), // 该值改变后重新调用handler方法
                zname: this.$route.query.name, //点击进入的分组名字
                zid: this.$route.query.id, //点击进入的分组名字
                specGood: {}, //显示规格弹窗的数据
                goodId: "", // 点击购物车图标的商品gid
                popShow: false, //下拉全部分组弹窗显示
                tagAll: [] //全部分组
            };
        },
        components: {
            ProductSpec,
            BottomTab,
            TopPop,
            ListGoods
        },
        computed: {
            isLogin() {
                let userInfo = this.$store.state.login.userInfo;
                console.log(
                    "loginlogin:",
                    this.$store.state.login.userInfo,
                    userInfo.role
                );
                let login = userInfo.role === undefined ? false : true;
                return login;
            }
        },
        created() {
            // this.infiniteHandler();// 重复加载时打开
            this.getRecZone();
        },
        methods: {
            ...mapActions(["addToCart"]),
            //查看所有分组
            allRecTab() {
                this.popShow = !this.popShow;
            },
            infiniteHandler($state) {
                setTimeout(() => {
                    this.request
                        .get(API.frontGetZoneGoods, {
                            group: this.zid,
                            page: this.pageIndex,
                            size: this.pageSize
                        })
                        .then(res => {
                            console.log("frontGetZoneGoods", res.length);
                            if (res.length) {
                                this.pageIndex += 1;
                                this.zoneGoodsList.push(...res);
                                $state.loaded();
                                if (res.length < this.pageSize) {
                                    $state.complete();
                                }
                            } else {
                                $state.complete();
                            }
                        })
                        .catch(err => {
                            console.error("frontGetZoneGoods-err", err);
                        });
                }, 1000);
            },
            toDetail(detail) {
                console.log("toDetail", detail);
                this.$router.push({
                    name: "online-detail",
                    query: {
                        gid: detail.gid
                    }
                });
            },
            toAddCart(good) {
                this.specGood = {};
                this.request
                    .get(API.frontGetMiniGood, {
                        gid: good.gid
                    })
                    .then(res => {
                        console.log("frontGetMiniGood", res);
                        this.goodId = good.gid;
                        this.specGood = res;
                        this.specGood.pic = good.pic;
                        setTimeout(() => {
                            // console.log('that.$refs',that.$refs)
                            this.$refs.fspec.show();
                        }, 5);
                    })
                    .catch(err => {
                        console.error("frontGetMiniGood-err", err);
                    });
            },
            specChooseOk(sku) {
                console.log("SKUSKU", sku);
                sku.system = this.$store.state.login.system;
                sku.gid = this.goodId;
                if (sku.buyid) {
                    if (this.isLogin) {
                        // 购物车添加商品（已注册）
                        this.request
                            .post(API.onlineAddCartGoods, {
                                gid: sku.gid,
                                buyid: sku.buyid,
                                num: sku.count
                            })
                            .then(res => {
                                console.log("onlineAddCartGoods", res);
                            })
                            .catch(err => {
                                console.error("onlineAddCartGoods-err", err);
                            });
                    } else {
                        this.addToCart(sku);
                    }
                    this.$toast("加入购物车成功");
                }
            },
            getMoreGoods(zone) {
                console.log("getMoreGoods", zone);
                if (zone !== 0) {
                    this.zname = zone.name;
                    this.zid = zone.id;
                    this.$router.replace({
                        name: "zone-goods",
                        query: {
                            id: zone.id,
                            name: zone.name
                        }
                    });
                    // location.reload();  //实现页面重新加载
                } else {
                    this.$router.push({
                        name: "front"
                        // query:{
                        //     id: zone.id,
                        //     name: zone.name
                        // }
                    });
                }
            },
            // 获取分组及其商品
            getRecZone() {
                this.request
                    .get(API.frontGetSaleZone)
                    .then(res => {
                        console.log("frontGetSaleZone-zone-goods", res);
                        this.tagAll = res.tagAll;
                    })
                    .catch(err => {
                        console.error("frontGetSaleBrand-zone-goods-err", err);
                    });
            }
        },
        watch: {
            zname(newId) {
                this.pageIndex = 0;
                this.zoneGoodsList = [];
                this.infiniteId += 1;
                // this.infiniteHandler(); // 重复加载时打开
                console.log("watch--newId,", newId, this.pageIndex);
                // this.infiniteHandler($state)
            },
            pageIndex(newIndex) {
                console.log("watch--pageIndex,", newIndex, this.pageIndex);
            }
        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    >>> .van-tabs--line .van-tabs__wrap {
        height: vw(30);
        font-size: vw(14);
        margin-left: 0;
        /* border hotpink 1px solid */
    }

    >>> .van-tabs__line {
        background-color: grayF;
        margin-left: vw(5);
    }

    >>> .van-tab--active {
        color: main-color;
    }

    >>> .van-tab {
        padding-left: vw(15);
        line-height: vw(30);
        flex: none;
        width: auto;
        /* border hotpink 1px solid */
    }

    .zone-goods {
        /* background-color grayF */
        margin-bottom: vw(50);
    }

    .zone-tabs {
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-between;
        background-color: grayF;
        height: vw(30);
        width: 100%;
    }

    .rec-icon {
        position: absolute;
        right: cellPadding;
        line-height: vw(30);

        .down {
            width: vw(15);
            height: vw(12);
            z-index: 1000000;
        }
    }

    .tab-goods {
        margin-top: vw(30);
    }

    .no-more {
        word-vw(word12, gray9);
        flex-center();
        padding-bottom: 5vw;
        background-color: grayF;
        padding-top: vw(30);
    }
</style>